<template>
  <div class="rightbox" v-cloak>
    <h1>公司中心 > 公司信息新增</h1>
    <div class="add-box" style="width:650px;">
      <el-form ref="form" :model="form" label-width="140px">
        <el-form-item
          prop="companyname"
          label="公司名称"
          :rules="[
            { required: true, message: '请填写公司名称', trigger: 'blur' }
          ]">
          <el-input v-model="form.companyname"></el-input>
        </el-form-item>
        <el-form-item
          prop="legal"
          label="公司法人"
          :rules="[
            { required: true, message: '请填写法人名称', trigger: 'blur' }
          ]">
          <el-input v-model="form.legal"></el-input>
        </el-form-item>
        <el-form-item
          prop="phone"
          label="联系方式"
          :rules="[
            { required: true, message: '请填写联系方式', trigger: 'blur' }
          ]">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item
          v-if="state == 0"
          prop="logo"
          label="上传logo(必填)">
          <input type="file" ref="file" style="width:350px;float:left;">
          <span>尺寸(宽度大于100)</span>
        </el-form-item>
        <el-form-item
          v-if="state == 1"
          prop="logo"
          label="上传logo">
          <input type="file" ref="file" style="width:350px;float:left;">
          <span>尺寸(宽度大于100)</span>
        </el-form-item>
        <el-form-item
          prop="money"
          label="注册资金"
          :rules="[
            { required: true, message: '请填写注册资金', trigger: 'blur' }
          ]">
          <el-input style="width:120px;" v-model="form.money"></el-input> 万元
        </el-form-item>
        <el-form-item
          prop="companytype"
          label="企业类型"
          :rules="[
            { required: true, message: '请选择企业类型', trigger: 'blur' }
          ]">
          <el-radio v-for="(item, index) in form.companytypeList" :key="index"  v-model="form.companytype" :label="item.key">{{item.value}}</el-radio>
        </el-form-item>
        <el-form-item
          prop="settime"
          label="成立时间"
          :rules="[
            { required: true, message: '请选择成立日期', trigger: 'blur' }
          ]">
          <el-date-picker
            v-model="form.settime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          prop="idtype"
          label="证件类型"
          :rules="[
            { required: true, message: '请选择证件类型', trigger: 'blur' }
          ]">
          <el-radio v-for="(item, index) in form.idList" :key="index"  v-model="form.idtype" :label="item.key">{{item.value}}</el-radio>
        </el-form-item>
        <el-form-item
          prop="code"
          v-if="isadmin == false"
          label="营业执照注册编码"
          :rules="[
            { required: true, message: '请填写营业执照注册编码', trigger: 'blur' }
          ]">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item
          v-if="state == 0 && isadmin == false"
          prop="idimg"
          label="上传证件(必填)">
          <input type="file" ref="idimg" style="width:350px;float:left;">
          <span>尺寸(宽度大于300)</span>
        </el-form-item>
        <el-form-item
          v-if="state == 1 && isadmin == false"
          prop="idimg"
          label="上传证件">
          <input type="file" ref="idimg" style="width:350px;float:left;">
          <span>尺寸(宽度大于300)</span>
        </el-form-item>
        <el-form-item
          prop="address"
          label="公司地址"
          :rules="[
            { required: true, message: '请填写公司地址', trigger: 'blur' }
          ]">
          <el-cascader
            size="large"
            style="width:300px"
            :options="form.areaData"
            v-model="form.address"
            @change="handleChange">
          </el-cascader>
          <el-input style="margin-top:10px;" placeholder="详细地址" v-model="form.addressdetail"></el-input>
        </el-form-item>
        <el-form-item
          prop="area"
          label="服务范围">
          <el-cascader
            size="large"
            style="width:300px"
            :options="form.areaData"
            v-model="form.area">
          </el-cascader>
          <el-button style="margin-left:20px" type="primary" @click="addCity">确定添加</el-button>
          <template>
            <el-table
              :data="cityData"
              border
              style="width: 100%; margin-top: 20px">
              <el-table-column
                prop="Province"
                label="省">
              </el-table-column>
              <el-table-column
                prop="City"
                label="市">
              </el-table-column>
              <el-table-column
                prop="Area"
                label="区">
              </el-table-column>
              <el-table-column
                prop=""
                label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="remove(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-form-item>
        <el-form-item
          prop="acreage"
          label="房屋面积"
          :rules="[
            { required: true, message: '请选择房屋面积', trigger: 'blur' }
          ]">
          <el-select v-model="form.acreage" multiple placeholder="请选择" style="width:300px">
            <el-option v-for="(item, index) in form.acreageList" :key="index" :label="item.value" :value="item.key"></el-option>
          </el-select> ㎡
        </el-form-item>
        <el-form-item
          prop="price"
          label="承接价位"
          :rules="[
            { required: true, message: '请选择承接价位', trigger: 'blur' }
          ]">
          <el-select v-model="form.price" multiple placeholder="请选择" style="width:300px">
            <el-option v-for="(item, index) in form.moneyList" :key="index" :label="item.value" :value="item.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="detail"
          label="公司简介"
          :rules="[
            { required: true, message: '请填写公司简介', trigger: 'blur' }
          ]">
          <el-input type="textarea" v-model="form.detail"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit('form')">提交</el-button>
          <el-button  @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { CodeToText, regionDataPlus, TextToCode, regionData } from 'element-china-area-data'
export default {
  data () {
    return {
      form: {
        companyname: '',
        legal: '',
        money: '',
        companytype: '',
        companytypeList: [],
        settime: '',
        idtype: '',
        idList: [],
        code: '',
        phone: '',
        address: [],
        addressdetail: '',
        addressData: regionData,
        logo: '111',
        idimg: '',
        areaData: regionData,
        area: [],
        areaList: [],
        price: '',
        moneyList: [],
        acreage: [],
        acreageList: [],
        detail: '',
        Province: '',
        City: '',
        Area: ''
      },
      cityData: [],
      companyIndex: '',
      state: '',
      isadmin: ''
    }
  },
  methods: {
    isAdmin () {
      var that = this
      that.$axios.request('post', '/Company/IsAdminCompany')
        .then((res) => {
          if (res.code === 0) {
            that.isadmin = res.data
          }
        })
    },
    getIndea () {
      var that = this
      that.getData('8', function (data) {
        that.form.companytypeList = data
      })
      that.getData('9', function (data) {
        that.form.idList = data
      })
      that.getData('4', function (data) {
        that.form.acreageList = data
      })
      that.getData('6', function (data) {
        that.form.moneyList = data
      })
      that.$axios.request('post', '/Company/Index')
        .then((res) => {
          if (res.code === 0) {
            if (res.data.name === '' || res.data.name === null || res.data.name === undefined) {
              that.state = 0
              return false
            } else {
              that.state = 1
              that.companyIndex = res.data.companyIndex
              that.form.companyname = res.data.name
              that.form.legal = res.data.legalPerson
              that.form.money = res.data.capital
              that.form.phone = res.data.phone
              that.form.companytype = res.data.enterpriseType.key
              that.form.settime = res.data.establishment
              that.form.idtype = res.data.certType.key
              that.form.code = res.data.licenseCode
              that.form.addressdetail = res.data.detailed
              that.form.detail = res.data.describe
              for (var i = 0; i < res.data.serviceArea.length; i++) {
                that.form.acreage.push(res.data.serviceArea[i].key)
              }
              for (var j = 0; j < res.data.serviceMoney.length; j++) {
                that.form.price.push(res.data.serviceMoney[j].key)
              }
              that.form.cityData = ['110105']
              var cityData = JSON.parse(res.data.serviceScope)
              for (var d = 0; d < cityData.length; d++) {
                that.cityData.push({ 'Province': cityData[d].province, 'City': cityData[d].city, 'Area': cityData[d].area })
              }
              var province = TextToCode[res.data.province].code
              var city = TextToCode[res.data.province][res.data.city].code
              var area = TextToCode[res.data.province][res.data.city][res.data.area].code
              that.form.Province = res.data.province
              that.form.City = res.data.city
              that.form.Area = res.data.area
              that.form.address = [province, city, area]
            }
          }
        })
    },
    handleChange (value) {
      this.form.Province = CodeToText[value[0]]
      this.form.City = CodeToText[value[1]]
      this.form.Area = CodeToText[value[2]]
    },
    addCity () {
      var that = this
      if (that.form.area.length !== 0) {
        for (var i = 0; i < that.cityData.length; i++) {
          if (that.cityData[i].Province === CodeToText[that.form.area[0]]) {
            if (that.cityData[i].City === CodeToText[that.form.area[1]]) {
              if (that.cityData[i].Area === CodeToText[that.form.area[2]]) {
                that.$pub.messageTwo('该区域已添加', '消息提示')
                return false
              }
            }
          }
        }
        that.cityData.push({ Province: CodeToText[that.form.area[0]], City: CodeToText[that.form.area[1]], Area: CodeToText[that.form.area[2]] })
      } else {
        that.$pub.messageTwo('请先选择省市区', '消息提示')
      }
    },
    remove (scope) {
      var inde = this.cityData.indexOf(scope)
      if (inde !== -1) {
        this.cityData.splice(inde, 1)
      }
    },
    getData (value, func) {
      var that = this
      that.$axios.request('post', '/Config/Get', {
        ParamIndex: value
      })
        .then((res) => {
          if (res.code === 0) {
            func(res.data.items)
          }
        })
    },
    submit: function (form) {
      var that = this
      var formFile = new FormData()
      that.$refs[form].validate((valid) => {
        if (valid) {
          if (that.isadmin === false) {
            var idimg = that.$refs.idimg.files[0]
            formFile.append('licensemap', idimg)
            formFile.append('LicenseCode', that.form.code)
          }
          var cityData = JSON.stringify(that.cityData)
          var serviceArea = that.form.acreage.join(',')
          var serviceMoney = that.form.price.join(',')
          var logo = that.$refs.file.files[0]
          formFile.append('Name', that.form.companyname)
          formFile.append('LegalPerson', that.form.legal)
          formFile.append('Capital', that.form.money)
          formFile.append('EnterpriseType', that.form.companytype)
          formFile.append('Establishment', that.form.settime)
          formFile.append('CertType', that.form.idtype)
          formFile.append('Phone', that.form.phone)
          formFile.append('Province', that.form.Province)
          formFile.append('City', that.form.City)
          formFile.append('Area', that.form.Area)
          formFile.append('Detailed', that.form.addressdetail)
          formFile.append('ServiceArea', serviceArea)
          formFile.append('ServiceMoney', serviceMoney)
          formFile.append('Describe', that.form.detail)
          formFile.append('ServiceScope', cityData)
          formFile.append('logo', logo)
          that.$axios.request2('post', '/Company/CompanyUpdate', formFile)
            .then((res) => {
              if (res.code === 0) {
                that.$axios.alert('保存成功', '提示', function () {
                  that.$router.push({ name: 'inforList' })
                })
              }
            })
        } else {
          return false
        }
      })
    },
    resetForm: function (form) {
      var that = this
      that.$refs[form].resetFields()
    }
  },
  mounted () {
    this.isAdmin()
    this.getIndea()
  }
}
</script>
